<template>
  <div class="content">
    <div class="contain">
      <router-view></router-view>
    </div>
    <van-tabbar class="foot">
    <!-- <div class="foot"> -->
      <div class="foot-btn" @click="changeTab(1)">
        <img
          class="imgbtn"
          src="./../../assets/images/ludan.png"
          v-show="active !== 1"
        />
        <img
          class="imgbtn"
          src="./../../assets/images/ludan1.png"
          v-show="active === 1"
        />
      </div>
      <div class="foot-btn" @click="changeTab(2)">
        <img
          class="imgbtn"
          src="./../../assets/images/dingdan.png"
          v-show="active !== 2"
        />
        <img
          class="imgbtn"
          src="./../../assets/images/dingdan1.png"
          v-show="active === 2"
        />
      </div>
      <div class="foot-btn" @click="changeTab(3)">
        <img
          class="imgbtn"
          src="./../../assets/images/wode.png"
          v-show="active !== 3"
        />
        <img
          class="imgbtn"
          src="./../../assets/images/wode1.png"
          v-show="active === 3"
        />
      </div>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'insurance-content',
  data () {
    return {
      // active: 3,
    }
  },
  computed: {
    active: {
      get () {
        return this.$store.state.permission.menutab
      },
      set (value) {
        this.$store.commit('SET_MENUTAB', value)
      }
    }
  },
  created () {
    console.log('tab', this.$store.state.permission.menutab)
  },
  methods: {
    changeTab (tab) {
      localStorage.setItem('menutab', tab)
      this.$store.commit('SET_MENUTAB', tab)
      if (tab === 3) {
        this.active = 3
        this.$router.push({name: 'mine'})
      } else if (tab === 1) {
        this.active = 1
        this.$router.push({name: 'entryOrder'})
      } else if (tab === 2) {
        this.active = 2
        this.$router.push({name: 'orderManage'})
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .content{
    height calc( 100% - 200px )
    display flex
    position fixed
    top 100px
    width 100%
    // flex-direction: column
    // align-items: stretch
    background-color #F7F4F8
    // overflow hidden
    .contain {
      flex: 1 1 auto;
    }
    .foot{
      width 100%
      height 120px
      font-size 24px
      .foot-btn{
        display inline-block
        width 32%
        text-align center
        .imgbtn{
          width 62px
          margin-top 12px
          vertical-align middle
        }
      }
    }
  }
</style>
